<style>
    .app-container{
      background: #fff;
      position: absolute;
      width:100%;
      height: 100%;
      overflow: auto;
    }
    table {
      border-spacing: 0;
      border-collapse: collapse;
    }
    .table-bordered {
      border: 1px solid #ddd;
    }
    .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th {
      background-color: #f9f9f9;
    }
    .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th,
    .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
      font-size: 18px;
      color: #333;
      padding: 8px;
      line-height: 1.42857143;
      vertical-align: center;
      border-top: 1px solid #ddd;
    }
    .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th{
      text-align: center;
      width: 120px;
    }
    .table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td {
      border: 1px solid #ddd;
    }
    .active_content{
      padding: 0 20px  ;
      border-radius: 4px;
      border: 1px solid #ebeef5;
      background-color: #fff;
      overflow: hidden;
      color: #303133;
      transition: .3s;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    h4 {
      font-size: 32px;
    }
    .active_content span{
      font-size: 12px;
      color: #999;
    }
</style>
<template>
  <div class="app-container">
    <h4>基本信息</h4>
    <table
      class="table table-striped table-condenseda table-bordered"
      width="100%"
    >
      <tbody>
        <tr>
          <th width="15%">酒店名称</th>
          <td width="35%">
            <b style="font-size: 26px">{{ hotel.zkname }}</b> 
            ({{ hotel.param.zktype }})
          </td>
          <th width="20%">酒店logo</th>
          <td width="40%">
            <img
              :src="hotel.logoData"
              width="100"
            />
          </td>
        </tr>
        <tr>
          <th>酒店编号</th>
          <td>{{ hotel.zkcode }}</td>
          <th>地址</th>
          <td>{{ hotel.param.fullAddress }}</td>
        </tr>
        <tr>
          <th>坐车路线</th>
          <td colspan="3">{{ hotel.route }}</td>
        </tr>
        <tr>
          <th>酒店简介</th>
          <td colspan="3">{{ hotel.intro }}</td>
        </tr>
      </tbody>
    </table>

    <h4>酒店房间信息</h4>
    <table
      class="table table-striped table-condenseda table-bordered"
      width="100%"
    >
      <tbody v-for="(item, index) in hotelRoom" :key="index">
        <tr width="100%" style="font-size:24px;font-weight:bold;">索引：{{index+1}}</tr>
        <tr>
          <th width="15%">房间编号</th>
          <td width="35%">{{ item.roomcode }}</td>
          <th width="15%">房间名称</th>
          <td width="35%">{{ item.roomname }}</td>
        </tr>
        <tr>
          <th>房间价格</th>
          <td>{{ item.roomprice }}</td>
          <th>是否可住</th>
          <td>
            {{ item.status == 1 ? "可住" : "不可住"
            }}
          </td>
        </tr>
      </tbody>
        <el-row>
          <el-button @click="back">返回</el-button>
        </el-row>
    </table>
  </div>
</template>

<script>
import hotelApi from './api/hotel'

export default {
  data() {
    return {
      hotel: {}, // 酒店信息
      hotelRoom: {}, // 房间信息
    };
  },
  created() {
    
  },
  mounted(){
    
  },
  methods: {
    //根据id查询医院详情
    fetchHotelDetail(id) {
      hotelApi.getHotelById(id).then(({data}) => {
        this.hotel = data.data;
        this.hotelRoom = data.data.hotelRoom;
      });
    },
    //返回医院列表
    back() {
      this.$router.go(0);
    },
  },
};
</script>
